<!doctype html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <link rel="stylesheet" href="css/font-awesome.min.css" >
    <title>借书页面</title>


    <style>
        html{
            height:100%;
        }
        body{
            height:100%;
        }

        #app{
            width:100%;
            height:100%;

            min-width: 900px;
            min-height:500px;

            overflow: auto;/*超出范围自动产生滚动条*/

            display: flex;/* 定义本元素（#app）是一个flex（柔性布局/灵活布局）盒子  */
            flex-direction: row;/*内部元素按行排列*/

        }

        .nav{
            height:100%;

            overflow: hidden;/*超出范围隐藏*/
            transition: width 0.5s;

            box-shadow: rgba(0, 0, 0, 0.1) 1px 0px 1px;

            display:flex;
            flex-direction: column;
        }

        .main{
            height:100%;
            flex:auto;/*本元素做为flex容器中的元素，以自动扩展占位*/

            display: flex;
            flex-direction: column;

        }

        .title{
            width:100%;
            height:50px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 1px;

            position: relative;/*这样设置，将做为子元素的定位基准*/
        }

        .currbook{
            position:absolute;/*相对于父元素定位*/
            right:20px;
            bottom: 5px;

            display:flex;
            flex-direction: row;/*主轴为水平方向*/
            align-items: center;/*交叉轴居中对齐*/

        }

        .content{
            padding:5px;
            width:100%;
            flex:auto;
            background: url("img/lendback.png");
        }

        .bottom{
            width:100%;
            height:30px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 1px;
        }
        .uploadFace{
            width: 200px;
            height: 200px;
            float:left;
        }
        .book_title{
            width: 200px;
            height: 200px;
            float:left;
        }
        .


        .main-menu:hover{/*鼠标悬浮时的样式*/
            color:white;
            background-color: slateblue;
        }

    </style>


</head>
<body>


<div id="app">

    <div class="main"style="background-color:lightskyblue">
        <div class="title"style="background-color:lightskyblue">





        </div>
        <div class="content" style="box-shadow: 10px 10px 5px #888888;" >
            <div class="uploadFace">
                <div   >
                    <img v-if="currentBook.cover" :src="'cover?filename='+currentBook.cover" style="height:300px;width:200px;" @click="openUploadWin" />
                    <div v-else style="background:white;width:200px;height:300px;display:flex;flex-direction: column;cursor:pointer;align-items: center;justify-content: center;border:medium double rgb(250,0,255);"@click="openUploadWin">
                        <i v-else class="fa fa-plus fa-3x" style="color:#AAAAAA;cursor:pointer;"@click="openUploadWin"></i>
                        <div v-else style="font-size:26px;cursor:pointer;"@click="openUploadWin">上传封面</div>
                    </div>
                </div>
            </div>
            <div class="book_title">
                <div style="text-align: center;margin-left:100px;margin-right: -300px;">
                    <div class="form-group">
                        <label for="b_name" style="font-size:20px;">书名</label>
                        <input type="text" class="form-control" id="b_name" v-model="book.b_name"  >
                    </div>
                    <div class="form-group">
                        <label for="author"style="font-size:20px;">作者</label>
                        <input type="text" class="form-control" id="author" v-model="book.author"  >
                    </div>
                    <div class="form-group">
                        <label for="press"style="font-size:20px;">出版社</label>
                        <input type="text" class="form-control" id="press" v-model="book.press" >
                    </div>
                    <button type="button" class="btn btn-primary" style="margin-right: 100px;font-size:20px;box-shadow: 1px 1px 5px #888888;" @click="lend" >确定</button>
                    <button type="button" class="btn btn-primary" style="font-size:20px;box-shadow: 1px 1px 5px #888888;"@click="refresh" >提交</button>
                </div>
            </div>
        </div>
        <div class="bottom"></div>
    </div>



    <div id="upload-cover" style="display: none;padding:10px;">

        <div @click="choosecover" >

            <div v-if="currentFile" style="width:300px;height:300px;display:flex;flex-direction: column;align-items: center;justify-content: center;">
                <img :src="currentImgUrl" style="max-width:100%;max-height: 100%;"/>
            </div>

            <div v-else style="width:300px;height:300px;display:flex;flex-direction: column;cursor:pointer;align-items: center;justify-content: center;border:1px dashed #AAAAAA;">
                <i class="fa fa-plus fa-3x" style="color:#AAAAAA;cursor:pointer;"></i>
                <div style="font-size:26px;cursor:pointer;">上传封面</div>
            </div>


        </div>

        <button :disabled="currentFile==null" class="btn btn-primary btn-lg" style="width:100%;margin-top:10px;" @click="uploadcover" >上传封面</button>




    </div>

    <input v-show="false" type="file" ref="fileInput" @change="handleFile" />

</div>


<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>



    //定义vue应用配置
    const app = {
        //data函数专门用来定义数据
        data(){
            return {
                book:{
                    b_name:'',
                    author:'',
                    press:'',
                    lender:'',
                    cover:'',
                },
                addIdx:null,//新增窗口标识
                navWidth:180,

                currentBook:{},//当前用户信息

                currentFile:null,//当前图片文件
                currentImgUrl:null,//当前图片路径

            };
        },

        //定义方法
        methods:{
            //切换导航栏的宽度
            switchNavWidth(){
                this.navWidth = this.navWidth==180?0:180;
            },

            // getCurrentBook(){
            //     myAxios.get('/current-book').then(res=>{
            //         this.currentBook=res.data.data;
            //         console.log("当前用户：",this.currentBook);
            //     });
            // },

            //打开上传的弹框
            openUploadWin(){
                layer.open({
                    type:1,
                    title:false,
                    content:$('#upload-cover')
                });
            },
            refresh(){
                layer.msg('新增书本信息成功！',{icon:1},()=>{
                    window.location.reload();
                });
            },

            //选择
            choosecover(){
                this.$refs.fileInput.click();//通过程序点击文件框
            },
            //选择图片文件后处理图片文件
            handleFile(){
                this.currentFile = this.$refs.fileInput.files[0];//获得选中的图片文件

                let fileReader = new FileReader();
                fileReader.onload = ()=>{//读取文件完成事件
                    this.currentImgUrl = fileReader.result;//将加载结果（将文件转变为可访问的url）赋值与currentImgUrl
                };
                fileReader.readAsDataURL(this.currentFile);//读取文件并转化为url
            },
            lend(){
                const idx = layer.load();
                myAxios.post('/lend',this.book).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        layer.close(this.addIdx);
                        layer.msg('新增书本信息成功！',{icon:1});
                    }
                }).catch(err=>{
                    layer.close(idx);
                    layer.msg('新增书本信息失败！',{icon:2});
                });
            },
            getCurrentBook(){
                myAxios.get('/current-book').then(res=>{
                    this.currentBook=res.data.data;
                    console.log("当前用户：",this.currentBook);
                });
            },


            uploadcover(){
                let idx = layer.load();
                let formData = new FormData();
                formData.append("cover",this.currentFile);//"cover"是参数名

                myAxios.post("/cover",formData).then(res=>{
                    layer.close(idx);
                    if(res.data.success){
                        this.getCurrentBook();
                        layer.msg('上传成功！', {icon: 1});
                        this.currentFile = null;
                        this.currentImgUrl  = null;
                    }else{
                        layer.msg(res.data.message, {icon: 2});
                    }
                }).catch(err=>{
                    layer.close(idx);
                })
            },

            //退出系统
            exit(){
                myAxios.post('/exit').then(res=>{
                    if(res.data.success){
                        layer.msg('您已成功退出系统！请重新登录。',{icon:1},()=>{
                            window.location.href="login.html"
                        });
                    }else{
                        layer.msg('退出失败！',{icon:2});
                    }
                }).catch(err=>{
                    layer.msg('系统错误！请与管理员联系。',{icon:2});
                });
            }

        },

        //定义回调方法：mounted 该方法在页面渲染完成立即执行
        // mounted(){
        //     this.getCurrentBook();//调用获取用户信息的方法
        // }
    };

    Vue.createApp(app).mount('#app')

</script>



</body>
</html>